import React, { Component } from 'react'
import { TimuListApi } from '../request/api'
import GoBack from "@/components/GoBack"
import Wenda from "@/components/exam/Wenda"
import Danxuan from "@/components/exam/Danxuan"
import "./less/Exam.less"

// 手指触摸点
let startX = -1;
// 手指松开点
let endX = -1;
// 当前li的索引值
let liIndex = 0;

export default class Exam extends Component {
    state = {
        timuArr: [],
        ulLeft: 0
    }
    componentWillUnmount() {
        startX = -1;
        endX = -1;
        liIndex = 0;
    }
    render() {
        return (
            <div className="exam_page">
                <div className="top">
                    <i className="iconfont icon-datiqia"></i>
                    <section>
                        <big>{Math.abs(liIndex) + 1}</big>
                        <span>/{this.state.timuArr.length}</span>
                    </section>
                </div>
                <ul
                    className="ul_list"
                    style={{ width: this.state.timuArr.length * 100 + '%', left: this.state.ulLeft }}
                    onTouchStart={this.handleTouchStart.bind(this)}
                    onTouchMove={this.handleTouchMove.bind(this)}
                    onTouchEnd={this.handleTouchEnd.bind(this)}
                >
                    {
                        this.state.timuArr.map((item, index) => (
                            <li className="ul_list_li" key={index}>
                                <Danxuan obj={item} />
                                <Wenda obj={item} />
                            </li>
                        ))
                    }
                </ul>
                <GoBack />
            </div>
        )
    }
    componentDidMount() {
        TimuListApi(this.props.location.state).then(res => {
            if (res.errCode === 0) {
                console.log(res.data)
                this.setState({ timuArr: res.data })
            }
        })
    }
    // 手指触摸到屏幕
    handleTouchStart(e) {
        startX = e.touches[0].clientX
    }
    // 手指滑动
    handleTouchMove(e) {
        endX = e.touches[0].clientX
    }
    // 手指离开屏幕
    handleTouchEnd(e) {
        let _this = this;
        // 获取滑动范围
        if (startX > -1 && endX > -1) {
            let distance = Math.abs(startX - endX);
            if (distance > 50) {
                // 两个手指位置距离相差50px，即视为要滑动
                if (startX > endX) {
                    liIndex--;
                    // index是不能超过数组长度的
                    if (Math.abs(liIndex) >= _this.state.timuArr.length - 1) {
                        liIndex = -_this.state.timuArr.length + 1;
                    }
                } else {
                    liIndex++;
                    if (liIndex >= 0) {
                        liIndex = 0;
                    }
                }
                this.setState({ ulLeft: 100 * liIndex + '%' }, () => {
                    startX = -1;
                    endX = -1;
                });
            } else {
                return;
            }
        }
    }
}
